<!-- MyRefMessageComponent.vue -->
<!-- <template>
  <div>
    <h1>{{ title }}</h1>
    <h2 class="heading">{{ message }}</h2>
    <input type="text" v-model="message">
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const title = "My Message Component"
const message = ref("Welcome to Vue 3!")

</script> -->

<!-- MyRefMessageComponent.vue -->
<!-- <template>
  <div>
    <h2 class="heading">{{ message }}</h2>
    <input type="text" v-model="message"/>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Welcome to Vue 3!')
    return {
      message
    }
  }
}
</script> -->


<!-- MyRefMessageComponent.vue -->
<script lang="ts" setup>
import { ref } from 'vue'

const user = ref({
  name: "Maya",
  age: 20
})

user.value.name = "Rachel"
user.value = {
  name: "Samuel",
  age: 20
}

console.log(user.value)  //

</script>

<!-- MyRefMessageComponent.vue -->
